import React from "react";
import "./index.scss";
import { useState, useEffect } from "react";
import {
  Button,
  Form,
  Input,
  Space,
  Table,
  Drawer,
  Select,
  Breadcrumb,
  DatePicker,
  Checkbox,
  message,
} from "antd";
import {
  SearchOutlined,
  CloseOutlined,
  DoubleLeftOutlined,
} from "@ant-design/icons";
import type { ColumnsType } from "antd/es/table";
import type { DrawerProps } from "antd";
import type { DatePickerProps, RangePickerProps } from "antd/es/date-picker";
import type { CheckboxChangeEvent } from "antd/es/checkbox";
import {add, get} from '../../../apis/schoolApi'
import { values } from "mobx";

const School = () => {
  //请求数据
  useEffect(()=>{
    getUser();
  },[])
  const getUser = () =>{
    get().then((res:{[propName:string]:any}) => {
      let _data = res.data.map((v:{id:number}) =>{
        return {...v,key:v.id}
      })
      setData(_data);
    })
  }
  //搜索
  const onSearch = () => {
    console.log(111);
  };
  //重置
  const showDrawer = () => {
    console.log(222);
  };
  //高级筛选
  const [open, setOpen] = useState(false);
  const [placement] = useState<DrawerProps["placement"]>("top"); 
  const senior = () => {
    console.log(333);
    setOpen(true);
  };
  const style = {
    // padding:'0 30px'
  };
  const onClose = () => {
    setOpen(false);
  };
  const iStyle = {
    color: "#d6d6d6",
  };

  //表格
  interface DataType {
    key: string;
    // num: string;
    num: string[];
    name: string;
    type: string;
    status: string;
  }
  const columns: ColumnsType<DataType> = [
    {
      title: "学校编号",
      key:'s_code',
      dataIndex: "s_code",
      // render: (text) => <a>{text}</a>,
    },
    {
      title: "学校名称",
      dataIndex: "s_name",
    },
    {
      title: "支持业务类型",
      dataIndex: "s_type",
    },
    {
      title: "机构状态",
      dataIndex: "s_state",
    },
  ];
  //数据
  const [data,setData] = useState([])

  const rowSelection = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
      console.log(
        `selectedRowKeys: ${selectedRowKeys}`,
        "selectedRows: ",
        selectedRows
      );
    },
    getCheckboxProps: (record: DataType) => ({
      disabled: record.name === "Disabled User", // Column configuration not to be checked
      name: record.name,
    }),
  };
  //分页
  const pagination = {
    defaultPageSize: 5,
    defaultCurrent: 1,
    total: data.length,
    showQuickJumper: true,
    showSizeChanger: true,
    pageSizeOptions: [5, 10, 15, 20],
  };
  //新增
  const [openAdd, setOpenAdd] = useState(false);
  const [placementAdd] = useState<DrawerProps["placement"]>("top");
  const onAdd = () => {
    console.log(444);
    setOpenAdd(true);
  };
  const onCloseAdd = () => {
    setOpenAdd(false);
  };
  const onFishAdd = () =>{
    console.log(888);
    
    add(values).then((res:{[key:string]:any})=>{
      if(res.code==200){
        message.success('添加成功');
        setOpenAdd(false);
        getUser();
      }
    })
  }
   //修改
   const [openEdit, setOpenEdit] = useState(false);
   const [placementEdit] = useState<DrawerProps["placement"]>("top");
   const onEdit = () => {
     console.log(444);
     setOpenEdit(true);
   };
   const onCloseEdit = () => {
    setOpenEdit(false);
   };
  //删除
  const [openDel, setOpenDel] = useState(false);
  const [placementDel] = useState<DrawerProps["placement"]>("top");
  const onDel = () =>{
    console.log(666);
    setOpenDel(true);
    }
  const onCloseDel = () => {
    setOpenDel(false);
    };
  //审核
  const [openExa, setOpenExa] = useState(false);
  const [placementExa] = useState<DrawerProps["placement"]>("top");
  const onExa = () =>{
    console.log(777);
    setOpenExa(true);
  }
  const onCloseExa = () => {
    setOpenExa(false);
    };

    
  //日期选择
  const { RangePicker } = DatePicker;
  const onChange = (
    value: DatePickerProps["value"] | RangePickerProps["value"],
    dateString: [string, string] | string
  ) => {
    console.log("Selected Time: ", value);
    console.log("Formatted Selected Time: ", dateString);
  };
  const onOk = (
    value: DatePickerProps["value"] | RangePickerProps["value"]
  ) => {
    console.log("onOk: ", value);
  };
  const onChangeBus = (e: CheckboxChangeEvent) => {
    console.log(`checked = ${e.target.checked}`);
  };
  //联动选择
  const provinceData = ["四川省", "重庆市"];
  const cityData = {
    四川省: ["广安", "达州", "成都"],
    重庆市: ["渝北", "渝中", "大足"],
  };
  type CityName = keyof typeof cityData;
  const [cities, setCities] = useState(cityData[provinceData[0] as CityName]);
  const [secondCity, setSecondCity] = useState(
    cityData[provinceData[0] as CityName][0]
  );
  const handleProvinceChange = (value: CityName) => {
    setCities(cityData[value]);
    setSecondCity(cityData[value][0]);
  }
  const onSecondCityChange = (value: CityName) => {
    setSecondCity(value);
  };
  


  return (
    <div className="school">
      <div className="title">
        <Breadcrumb separator=">">
          <Breadcrumb.Item>学校管理</Breadcrumb.Item>
          <Breadcrumb.Item href="">学校管理</Breadcrumb.Item>
        </Breadcrumb>
      </div>
      {/* 搜索框 */}
      <div>
        <Form
          className="search"
          name="customized_form_controls"
          layout="inline"
          onFinish={onSearch}
        >
          <div className="btn">
            <Button
              type="primary"
              style={{ background: "#69657e" }}
              onClick={onAdd}
            >
              增加
            </Button>
            <Button type="primary" style={{ background: "#69657e" }} onClick={onEdit}>
              修改
            </Button>
            <Button type="primary" style={{ background: "#69657e" }} onClick={onDel}>
              删除
            </Button>
            <Button type="primary" style={{ background: "#69657e" }} onClick={onExa}>
              审核
            </Button>
          </div>
          <div className="inp">
            <Form.Item name="userId">
              <Input placeholder="请输入关键字搜索" />
            </Form.Item>
            <Form.Item>
              <Button
                type="primary"
                style={{ background: "#69657e" }}
                htmlType="submit"
              >
                <SearchOutlined />
              </Button>
            </Form.Item>
            <Form.Item>
              <Button
                type="primary"
                style={{ background: "#69657e" }}
                onClick={showDrawer}
              >
                重置
              </Button>
            </Form.Item>
            <Form.Item>
              <Button type="link" style={{ color: "#52a6ff" }} onClick={senior}>
                高级筛选
                <DoubleLeftOutlined rotate={270} style={iStyle} />
              </Button>
            </Form.Item>
          </div>
        </Form>
      </div>
      {/* //筛选弹出框 */}
      <div className="site-drawer-render-in-current-wrapper">
        <Drawer
          placement={placement}
          closable={false}
          onClose={onClose}
          open={open}
          key={placement}
          getContainer={false}
          bodyStyle={style}
          height={150}
        >
          <Form className="senior" layout="inline" onFinish={onSearch}>
            <Form.Item label="学校代码" name="roleName">
              <Input placeholder="请输入学校代码" />
            </Form.Item>
            <Form.Item label="学校名称" name="roleName">
              <Input placeholder="请输入学校名称" />
            </Form.Item>
            <Form.Item label="支持业务类型" name="role">
              <Select style={{ width: 180 }} placeholder="全部">
                <Select.Option value="全部">全部</Select.Option>
                <Select.Option value="非税缴学费">非税缴学费</Select.Option>
                <Select.Option value="一卡通">一卡通</Select.Option>
                <Select.Option value="学校代收费">学校代收费</Select.Option>
              </Select>
            </Form.Item>

            <Form.Item label="机构状态" name="status">
              <Select style={{ width: 180 }} placeholder="正常">
                <Select.Option value="1">正常</Select.Option>
                <Select.Option value="2">停用</Select.Option>
              </Select>
            </Form.Item>
            <div
              className="seniorClose"
              onClick={() => {
                setOpen(false);
              }}
            >
              <CloseOutlined />
            </div>
            <div className="seniorBtn">
              <Form.Item>
                <Button
                  type="primary"
                  style={{ background: "#69657e" }}
                  htmlType="submit"
                >
                  查询
                </Button>
              </Form.Item>
              <Form.Item>
                <Button
                  type="primary"
                  style={{ background: "#69657e" }}
                  htmlType="submit"
                >
                  重置
                </Button>
              </Form.Item>
            </div>
          </Form>
        </Drawer>
      </div>
      {/* 新增 */}
      <div className="add">
        <Drawer
          title="学校管理 新增"
          placement={placementAdd}
          closable={false}
          onClose={onCloseAdd}
          open={openAdd}
          key={placement}
          contentWrapperStyle={{
            position: "absolute",
            top: "25%",
            left: "20%",
            width: "60%",
            height:'45%'
          }}
        >
          <Form className="addSenior" layout="inline" onFinish={onFishAdd} style={{display:'flex',marginLeft:'100px',position:'relative'}}>
            <div className="addInf" style={{display:'flex',margin:'10px 0'}}>
              <Form.Item label="学校名称" name="s_name" >
                <Input placeholder="请输入学校名称" />
              </Form.Item>
              <Form.Item label="学校编码" name="s_code">
                <Input placeholder="请输入学校编码" />
              </Form.Item>
              <Form.Item label="县区非税区代码" name="s_area">
                <Input placeholder="请输入非税区代码" />
              </Form.Item>
            </div>
            <div className="addInf" style={{display:'flex',margin:'10px 0'}}>
              <Form.Item label="过渡户账户" name="s_transitiona">
                <Input placeholder="请输入过渡户账户" />
              </Form.Item>
              <Form.Item label="过渡户户名" name="s_transname">
                <Input placeholder="请输入过渡户户名" />
              </Form.Item>
              <Form.Item label="汇款频率" name="s_frequency">
                <Select style={{ width: 180 }} placeholder="请选择">
                  <Select.Option value="每季">每季</Select.Option>
                  <Select.Option value="每月">每月</Select.Option>
                  <Select.Option value="每周">每周</Select.Option>
                  <Select.Option value="每天">每天</Select.Option>
                </Select>
              </Form.Item>
            </div>
            <div className="addInf" style={{display:'flex',margin:'10px 0'}}>
              <Form.Item label="归集户账户" name="s_collection">
                <Input placeholder="请输入归集户账户" />
              </Form.Item>
              <Form.Item label="归集户户名" name="s_collecname">
                <Input placeholder="请输入归集户户名" />
              </Form.Item>
              <Form.Item label="汇款时间" name="s_remittance">
                <Space direction="vertical" size={12}>
                  <DatePicker showTime onChange={onChange} onOk={onOk} />
                </Space>
              </Form.Item>
            </div>
            <div className="code" style={{width:'80%',margin:'10px 0'}}>
              {/* <span>支持业务类型: </span> */}
              <Form.Item label="支持业务类型" name="s_type">
              <Checkbox onChange={onChangeBus}>非税缴学费</Checkbox>
              <Checkbox onChange={onChangeBus}>一卡通</Checkbox>
              <Checkbox onChange={onChangeBus}>学校代收费</Checkbox>
              </Form.Item>
            </div>
            <div className="addRess" style={{display:'flex',margin:'10px 0'}}>
              <Form.Item label="学校地址" name="s_address">
                <Select
                  style={{ width: 120,margin:'0 15px' }}
                  onChange={handleProvinceChange}
                  options={provinceData.map((province) => ({
                    label: province,
                    value: province,
                  }))}
                />
                <Select
                  style={{ width: 120 ,margin:'0 15px'}}
                  onChange={onSecondCityChange}
                  options={cities.map((city) => ({ label: city, value: city }))}
                />
                <Input placeholder="请输入详细地址" style={{width:'200px'}}/>
              </Form.Item>
            </div>
            <div className="addBtn"  style={{position: 'absolute',left:'45%',top:'280px'}}>
              <Form.Item>
                <Button
                  type="primary"
                  style={{ background: "#69657e" }}
                  htmlType="submit"
                >
                  保存
                </Button>
              </Form.Item>
            </div>
          </Form>
        </Drawer>
      </div>
      {/* 修改 */}
      <div className="edit">
        <Drawer
          title="学校管理 修改"
          placement={placementEdit}
          closable={false}
          onClose={onCloseEdit}
          open={openEdit}
          key={placement}
          contentWrapperStyle={{
            position: "absolute",
            top: "25%",
            left: "20%",
            width: "60%",
            height:'45%'
          }}
        >
          <Form className="editSenior" layout="inline" onFinish={onSearch} style={{display:'flex',marginLeft:'100px',position:'relative'}}>
            <div className="editInf" style={{display:'flex',margin:'10px 0'}}>
              <Form.Item label="学校名称" name="roleName">
                <Input placeholder="请输入学校名称" />
              </Form.Item>
              <Form.Item label="学校编码" name="roleName">
                <Input placeholder="请输入学校编码" />
              </Form.Item>
              <Form.Item label="县区非税区代码" name="roleName">
                <Input placeholder="请输入非税区代码" />
              </Form.Item>
            </div>
            <div className="editInf" style={{display:'flex',margin:'10px 0'}}>
              <Form.Item label="过渡户账户" name="roleName">
                <Input placeholder="请输入过渡户账户" />
              </Form.Item>
              <Form.Item label="过渡户户名" name="roleName">
                <Input placeholder="请输入过渡户户名" />
              </Form.Item>
              <Form.Item label="汇款频率" name="role">
                <Select style={{ width: 180 }} placeholder="请选择">
                  <Select.Option value="每季">每季</Select.Option>
                  <Select.Option value="每月">每月</Select.Option>
                  <Select.Option value="每周">每周</Select.Option>
                  <Select.Option value="每天">每天</Select.Option>
                </Select>
              </Form.Item>
            </div>
            <div className="editInf" style={{display:'flex',margin:'10px 0'}}>
              <Form.Item label="归集户账户" name="roleName">
                <Input placeholder="请输入归集户账户" />
              </Form.Item>
              <Form.Item label="归集户户名" name="roleName">
                <Input placeholder="请输入归集户户名" />
              </Form.Item>
              <Form.Item label="汇款时间" name="status">
                <Space direction="vertical" size={12}>
                  <DatePicker showTime onChange={onChange} onOk={onOk} />
                </Space>
              </Form.Item>
            </div>
            <div className="code" style={{width:'80%',margin:'10px 0'}}>
              <span>支持业务类型: </span>
              <Checkbox onChange={onChangeBus}>非税缴学费</Checkbox>
              <Checkbox onChange={onChangeBus}>一卡通</Checkbox>
              <Checkbox onChange={onChangeBus}>学校代收费</Checkbox>
            </div>
            <div className="editRess" style={{display:'flex',margin:'10px 0'}}>
              <Form.Item label="学校地址" name="roleName">
                <Select
                  style={{ width: 120,margin:'0 15px' }}
                  onChange={handleProvinceChange}
                  options={provinceData.map((province) => ({
                    label: province,
                    value: province,
                  }))}
                />
                <Select
                  style={{ width: 120 ,margin:'0 15px'}}
                  onChange={onSecondCityChange}
                  options={cities.map((city) => ({ label: city, value: city }))}
                />
                <Input placeholder="请输入详细地址" style={{width:'200px'}}/>
              </Form.Item>
            </div>
            <div className="editBtn" style={{position: 'absolute',left:'45%',top:'280px'}}>
              <Form.Item>
                <Button
                  type="primary"
                  style={{ background: "#69657e" }}
                  htmlType="submit"
                >
                  保存
                </Button>
              </Form.Item>
            </div>
          </Form>
        </Drawer>
      </div>
      {/* 删除 */}
      <div className="del">
        <Drawer
          title="提示"
          placement={placementDel}
          closable={false}
          onClose={onCloseDel}
          open={openDel}
          key={placement}
          contentWrapperStyle={{
            position: "absolute",
            top: "25%",
            left: "30%",
            width: "50%",
            height:'200px'
          }}
        >
          <Form className="delSenior" layout="inline" onFinish={onSearch} >
          <p style={{fontSize:'20px'}}>确定要删除选中的学校？</p>
            <div className="delBtn" style={{display:'flex',margin:'30px 38% 0'}}>
            <Form.Item>
                <Button
                  type="primary"
                  style={{ background: "#69657e" }}
                  onClick={()=>{
                    setOpenDel(false)
                  }}
                >
                  取消
                </Button>
              </Form.Item>  
              <Form.Item>
                <Button
                  type="primary"
                  style={{ background: "#69657e" }}
                  htmlType="submit"
                >
                  确定
                </Button>
              </Form.Item>
            </div>
          </Form>
        </Drawer>
      </div>
      {/* 审核 */}
      <div className="exa">
        <Drawer
          title="学校管理 审核"
          placement={placementExa}
          closable={false}
          onClose={onCloseExa}
          open={openExa}
          key={placement}
          contentWrapperStyle={{
            position: "absolute",
            top: "25%",
            left: "20%",
            width: "60%",
            height:'45%'
          }}
        >
          <Form className="exaSenior" layout="inline" onFinish={onSearch} style={{display:'flex',marginLeft:'100px',position:'relative'}}>
            <div className="exaInf" style={{display:'flex',margin:'10px 0'}}>
              <Form.Item label="学校名称" name="roleName">
                <Input placeholder="请输入学校名称" />
              </Form.Item>
              <Form.Item label="学校编码" name="roleName">
                <Input placeholder="请输入学校编码" />
              </Form.Item>
              <Form.Item label="县区非税区代码" name="roleName">
                <Input placeholder="请输入非税区代码" />
              </Form.Item>
            </div>
            <div className="exaInf" style={{display:'flex',margin:'10px 0'}}>
              <Form.Item label="过渡户账户" name="roleName">
                <Input placeholder="请输入过渡户账户" />
              </Form.Item>
              <Form.Item label="过渡户户名" name="roleName">
                <Input placeholder="请输入过渡户户名" />
              </Form.Item>
              <Form.Item label="汇款频率" name="role">
                <Select style={{ width: 180 }} placeholder="请选择">
                  <Select.Option value="每季">每季</Select.Option>
                  <Select.Option value="每月">每月</Select.Option>
                  <Select.Option value="每周">每周</Select.Option>
                  <Select.Option value="每天">每天</Select.Option>
                </Select>
              </Form.Item>
            </div>
            <div className="exaInf" style={{display:'flex',margin:'10px 0'}}>
              <Form.Item label="归集户账户" name="roleName">
                <Input placeholder="请输入归集户账户" />
              </Form.Item>
              <Form.Item label="归集户户名" name="roleName">
                <Input placeholder="请输入归集户户名" />
              </Form.Item>
              <Form.Item label="汇款时间" name="status">
                <Space direction="vertical" size={12}>
                  <DatePicker showTime onChange={onChange} onOk={onOk} />
                </Space>
              </Form.Item>
            </div>
            <div className="code" style={{width:'80%',margin:'10px 0'}}>
              <span>支持业务类型: </span>
              <Checkbox onChange={onChangeBus}>非税缴学费</Checkbox>
              <Checkbox onChange={onChangeBus}>一卡通</Checkbox>
              <Checkbox onChange={onChangeBus}>学校代收费</Checkbox>
            </div>
            <div className="addRess" style={{display:'flex',margin:'10px 0'}}>
              <Form.Item label="学校地址" name="roleName">
                <Select
                  style={{ width: 120,margin:'0 15px' }}
                  onChange={handleProvinceChange}
                  options={provinceData.map((province) => ({
                    label: province,
                    value: province,
                  }))}
                />
                <Select
                  style={{ width: 120 ,margin:'0 15px'}}
                  onChange={onSecondCityChange}
                  options={cities.map((city) => ({ label: city, value: city }))}
                />
                <Input placeholder="请输入详细地址" style={{width:'200px'}}/>
              </Form.Item>
            </div>
            <div className="exaBtn" style={{display:'flex',position: 'absolute',left:'35%',top:'280px'}}>
            <Form.Item>
                <Button
                  type="primary"
                  style={{ background: "#69657e" }}
                  htmlType="submit"
                >
                  同意
                </Button>
              </Form.Item>
              <Form.Item>
                <Button
                  type="primary"
                  style={{ background: "#69657e" }}
                  htmlType="submit"
                >
                  拒绝
                </Button>
              </Form.Item>
            </div>
          </Form>
        </Drawer>
      </div>
      {/* 表格 */}
      <Table
        className="table"
        rowSelection={{
          type: "radio",
          
          ...rowSelection,
        }}
        columns={columns}
        dataSource={data}
        pagination={pagination} //分页
        bordered={true}
      />
    </div>
  );
};
export default School;
